import { ReactNode } from 'react';

import cn from 'classnames';

import cs from './List.module.scss';

const Dot = () => (
  <svg fill="none" height="6" viewBox="0 0 6 6" width="6" xmlns="http://www.w3.org/2000/svg">
    <circle cx="3" cy="3" fill="black" r="3" />
  </svg>
);
export const ListItem = ({
  title,
  list,
  icon,
  border,
}: {
  title: ReactNode;
  list: string[];
  icon?: ReactNode;
  border?: boolean;
}) => (
  <div className={cn(cs.container, border && cs.border)}>
    <div className={cs.range}>{title}</div>
    <div className={cs.items}>
      <ul className={cs.list}>
        {list.map((item) => (
          <li className={cs.item} key={item}>
            <Dot /> <span>{item}</span>
          </li>
        ))}
      </ul>
      {!!icon && <div className={cs.icon}>{icon}</div>}
    </div>
  </div>
);
